<template>
	<view class="tabs" :style="tabberStyle">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true">
		    <view v-for="(tab,index) in tabar" :key="tab.id" 
			class="uni-tab-item" :id="tab.id" :data-current="index" :style="tabbarItemStyle" @click="ontabtap(index)">
		        <text class="uni-tab-item-title"
				 :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}  {{tab.num>0?tab.num:''}}
				
				 </text>
		    </view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:['tabar','tabIndex','tabberStyle','tabbarItemStyle'],
		data(){
			return{
				// tabBar:[]
			}
		},
		mounted() {
			this.tabar=this.tabar;
			this.tabIndex=this.tabIndex;
		},
		methods:{
			ontabtap(index){
				this.$emit('tabtap',index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs {
	    flex: 1;
	    flex-direction: column;
	    overflow: hidden;
		border-bottom: 1px solid #C8C7CC;
	    background-color: #fffff;
	    /* #ifdef MP-ALIPAY || MP-BAIDU */
	    height: 100vh;
	
	    /* #endif */
	}
	
	.scroll-h {
	    width: 750rpx;
	    height: 80upx;
		color: #000000;
	    flex-direction: row;
	    white-space: nowrap;
		scroll-view{
		   overflow: auto hidden;
	   }
	}
	
	.line-h {
	    height: 1rpx;
	    background-color: #cccccc;
	}
	
	.uni-tab-item {
	    display: inline-block;
	    flex-wrap: nowrap;
	    // padding-left: 34rpx;
	    // padding-right: 34rpx;
		font-weight: bold;
	}
	
	.uni-tab-item-title {
	    color: #9B9B9B;
	    font-size: 30rpx;
	    height: 80rpx;
	    line-height: 80rpx;
	    flex-wrap: nowrap;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	
	.uni-tab-item-title-active {
	    color: #000000;
		border-bottom: 8upx solid #FEDE33;
		
	}
</style>
